<template name="ys-address">
	<view class="ys-address">
    <view class="address-list" v-for="(item, index) in list" :key="index">
    	<view class="shop-info">
    		<view class="shopName">{{item.shop}}</view>
        <view class="address">{{item.addr||"----------------------------"}}</view>
    	</view>
      <view class="distance">
        <text class="now-icon"></text>
      	{{item.distance}}km
      </view>
    </view>
  </view>
</template>

<script>
  export default {
      name: "ys-address",
       props: {
           list: {
               type: Array,
               default: () => []
           }
       },
      mounted() {
          
      },
      data() {
          return {
              
          };
      },
      methods: {
          
      }
  } 
</script>

<style lang="scss">
  .ys-address{
    width: 100%;
    height: 100%;
    .address-list{
      width: 100%;
      position: relative;
      height: 120upx;
      border-bottom: 1px solid #e6e6e6; 
      background-color: #fff;
      padding: 20upx;
      top: 120upx;
      .shop-info{
        position: absolute;
        .shopName{
          font-size: 28rpx;
          color: #252525;
        }
        .address{
          font-size: 24rpx;
          color: #252525;
        }
      }
      .distance{
        position: absolute;
        right: 30upx;
        height: 100%;
        line-height: 60px;
        font-size: 28rpx;
        color: 252525;
        top: 0;
        .now-icon{
          display: none;
          width: 32upx;
          height: 32upx;
          margin-right: 20upx;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url('');
        }
        .now-icon-active {
          display: inline-block;
        }
      }
    }
    .active{
       background-color: #f2f2f2;
    }
  }
</style>
